<template>
    <div>
        <h1>会员显示</h1>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="check" @click="checkALL"></td>
                    <td>Id</td>
                    <td>门店</td>
                    <td>地址</td>
                    <td>门店logo</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>营业时间</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="itme in data.list" >
                    <td><input type="checkbox" v-model="ids" :value="itme.Id" @change="checkOne"></td>
                    <td>{{ itme.Id }}</td>
                    <td>{{ itme.Name }}</td>
                    <td>{{ itme.MDAddres }}</td>
                    <td><img :src="itme.Pic" width="100" height="100"></td>
                    <td>{{ itme.FWFW }}</td>
                    <td>{{ itme.MDName }}</td>
                    <td>{{ itme.Tel }}</td>
                    <td>{{ itme.ConTime }}</td>
                    <td>{{ itme.State ? "启用" : "禁用" }}</td>
                    <td><input type="button" value="删除" @click="del(itme.Id)"></td>
                </tr>
            </tbody>
        </table>
        <span><b>共{{ data.totalcount }}条</b></span>
        <span><b>每页{{ info.pagesize }}条</b></span>
        <span><b>共{{ info.pageIndex }}/{{ data.totalpage }}页</b></span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageIndex - 1)">
        <span v-for="itme in data.totalcount" @click="gopage(itme)">{{ itme }}</span>
        <!-- <span v-for="itme in data.totalpage" @click="gopage(itme)">
            {{ itme }}
        </span> -->
        <input type="button" value="下一页" @click="gopage(info.pageIndex + 1)">
        <input type="button" value="尾页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pageIndex">
        <input type="button" value="跳转" @click="gopage(info.pageIndex)">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const rouder = useRouter();
const roude = useRoute();

let data: any = reactive({
    list: [],
    totalcount: 0,
    totalpage: 0
})
let info: any = reactive({
    pageIndex: 1,
    pagesize: 2
})
let check: any = ref(false);
let ids: any = ref([]);
onMounted(() => {
    getlists();

})

const getlists = () => {
    axios({
        url: '/api/GongGao/GetSo',
        method: 'get',
        params: info
    })
        .then((res) => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch((err) => {
            console.log(err);

        })
}
const show = () => {
    info.pageIndex = 1;
    getlists();
}
const gopage = (num: any) => {
    if (num < 1) {
        info.pageIndex = 1;
        return;

    }
    if (num > data.totalpage) {
        info.pageIndex = data.totalpage;
        return;
    }
    info.pageIndex = num;
    getlists();
};
const del = (id: any) => {
    axios({
        url: '/api/GongGao/DEL',
        method: 'delete',
        params: { id: id }
    })
        .then((res) => {
            console.log(res);
            if (res.data > 0) {
                alert("删除成功")
                return;
            }
            else {
                alert("删除失败")
                return;
            }
        })
        .catch((err) => {
            console.log(err);

        })
}

const checkOne = () => {
    if (ids.value.length = data.list.length) {
        check.value = true;
    }
    else {
        check.value = false;
    }
}
const checkALL = () => {
    check.value = !check.value;
    if (check.value == true) {
        ids.value = data.list.map((itme: any) => {
            return itme.Id
        });
    }
    else {
       return ids.value=[];
    }
}
</script>

<style scoped></style>